const SYSTEM_INFO = uni.getSystemInfoSync()
// 小程序特有的菜单按钮
let menuButtonTop = 0;
let menuButtonHeight = 0;
let menuButtonRight = 0;
let menuButtonLeft = 0;

if (uni.getMenuButtonBoundingClientRect) {
	const MENU_BUTTON = uni.getMenuButtonBoundingClientRect()
	const { top, height, right, left } = MENU_BUTTON
	menuButtonTop = top
	menuButtonHeight = height
	menuButtonRight = right
	menuButtonLeft = left
}

const info = SYSTEM_INFO
console.log(info)
const safeAreaInsetsBottom = info.safeAreaInsets.bottom
export const safeAreaInsetsTop = info.safeAreaInsets.top
const safeAredWidth = info.safeArea.width
const safeAreaHeight = info.safeArea.height
const menuButtonPadding = menuButtonTop - safeAreaInsetsTop
export const menuButtonBarHeight = menuButtonPadding * 2 + menuButtonHeight
export const mainHomeExploreTabsHeight = 60 // 发现页面里面的tab高度
export const mainBottomTabsHeight = 90 // 首页、热门、消息、我
export const miniProgramBarWidth = menuButtonLeft

// 顶部tabBar(px)
export const mainTopTabsHeight = () => {
	// #ifdef MP-WEIXIN
	return menuButtonBarHeight
	// #endif
	// #ifdef MP-TOUTIAO
	return menuButtonBarHeight * 2
	// #endif
	// #ifdef WEB
	return uni.upx2px(mainBottomTabsHeight)
	// #endif
	// #ifdef APP
	return uni.upx2px(mainBottomTabsHeight) + safeAreaInsetsTop
	// #endif
}

export const editTabsMenuStyle = () => {
	// #ifdef MP-WEIXIN
	return mainTopTabsHeight() + safeAreaInsetsTop
	// #endif
	// #ifdef MP-TOUTIAO
	return mainTopTabsHeight() + safeAreaInsetsTop
	// #endif
	// #ifdef WEB
	return mainTopTabsHeight() + safeAreaInsetsTop
	// #endif
	// #ifdef APP
	return mainTopTabsHeight()
	// #endif
}

// 关注、发现、宁波
export const menuButtonBarStyle = () => {
	// #ifdef MP-WEIXIN
	return `height: ${menuButtonBarHeight}px; padding:0 ${safeAredWidth - menuButtonRight}px; width: ${menuButtonLeft}px;`
	// #endif
	// #ifdef MP-TOUTIAO
	return `height: ${menuButtonBarHeight}px;`
	// #endif
	// #ifdef WEB || APP
	return `padding: 0 10rpx; height: ${mainBottomTabsHeight}rpx;`
	// #endif
}

// 留白
export const mainHomePlaceholderStyle = () => {
	// #ifdef MP-WEIXIN
	return `height: ${menuButtonBarHeight}px; padding:0 ${safeAredWidth - menuButtonRight}px; width: ${menuButtonLeft}px;`
	// #endif
	// #ifdef MP-TOUTIAO
	return `height: ${menuButtonBarHeight}px;`
	// #endif
	// #ifdef WEB
	return `padding: 0 10rpx; height: ${mainBottomTabsHeight}rpx;`
	// #endif
	// #ifdef APP
	return `padding: 0 10rpx; height: ${mainBottomTabsHeight}rpx;`
	// #endif
}

// 手机safeArea
export const safePaddingStyle = () => {
	// #ifdef MP-WEIXIN
	return `padding: ${safeAreaInsetsTop}px 0 ${safeAreaInsetsBottom}px 0;`
	// #endif
	// #ifdef MP-TOUTIAO
	return `padding: ${safeAreaInsetsTop + menuButtonBarHeight}px 0 ${safeAreaInsetsBottom}px 0;`
	// #endif
	// #ifdef WEB
	return `padding: 0;`
	// #endif
	// #ifdef APP
	return `padding: ${safeAreaInsetsTop}px 0 ${safeAreaInsetsBottom}px 0;`
	// #endif
}

// 侧边栏边距
export const asideMenuSafePaddingStyle = () => {
	// #ifdef MP-WEIXIN || APP
	return `padding: ${safeAreaInsetsTop + 10}px 0 ${safeAreaInsetsBottom + 10}px 0;`
	// #endif
	// #ifdef MP-TOUTIAO
	return `padding: ${safeAreaInsetsTop + menuButtonBarHeight}px 0 ${safeAreaInsetsBottom}px 0;`
	// #endif
	// #ifdef WEB
	return `padding: 20rpx 0;`
	// #endif
}
// 推荐页面的高度
export const mainHomeExploreScrollViewStyle = () => {
	// #ifdef MP-WEIXIN
	return `height: calc(${safeAreaHeight}px - ${menuButtonBarHeight}px - ${mainBottomTabsHeight}rpx);`
	// #endif
	// #ifdef MP-TOUTIAO
	return `height: calc(${safeAreaHeight}px - ${menuButtonBarHeight}px - ${mainBottomTabsHeight}rpx - ${menuButtonBarHeight}px)`
	// #endif
	// #ifdef WEB
	return `height: calc(${safeAreaHeight}px - ${mainBottomTabsHeight}rpx - ${mainBottomTabsHeight}rpx)`
	// #endif
	// #ifdef APP
	return `height: calc(${safeAreaHeight}px - ${mainBottomTabsHeight}rpx - ${safeAreaInsetsTop}px);`
	// #endif
}
// 推荐留白的高度
export const mainHomeExplorePlacehoderStyle = () => {
	// #ifdef MP-WEIXIN
	return `height: ${mainHomeExploreTabsHeight}rpx`
	// #endif
	// #ifdef MP-TOUTIAO
	return `height: ${mainHomeExploreTabsHeight}rpx`
	// #endif
	// #ifdef WEB || APP
	return `height: ${mainHomeExploreTabsHeight}rpx`
	// #endif
}
// 地址页面的高度
export const mainHomeLocationViewStyle = () => {
	// #ifdef MP-WEIXIN || APP
	return `height: calc(${safeAreaHeight}px - ${menuButtonBarHeight}px - ${mainBottomTabsHeight}rpx)`
	// #endif
	// #ifdef MP-TOUTIAO
	return `height: calc(${safeAreaHeight}px - ${menuButtonBarHeight}px - ${mainBottomTabsHeight}rpx - ${menuButtonBarHeight}px)`
	// #endif
	// #ifdef WEB
	return `height: calc(${safeAreaHeight}px - ${mainBottomTabsHeight}rpx - ${mainBottomTabsHeight}rpx);`
	// #endif
}
// 我的页面
export const webAppBarHeight = 70;
export const mainMineAppBarStyle = (appBarOpacity : number) => {
	let backgroundStyle = `background-color: rgba(112, 89, 95, ${appBarOpacity})`
	// #ifdef MP-WEIXIN
	return `padding-right: ${safeAredWidth - menuButtonLeft + 10}px; height: ${menuButtonBarHeight}px;${backgroundStyle}; top: ${safeAreaInsetsTop}px`
	// #endif
	// #ifdef MP-TOUTIAO
	return `height: ${menuButtonBarHeight}px;${backgroundStyle}; top: ${safeAreaInsetsTop + menuButtonBarHeight}px`
	// #endif
	// #ifdef WEB
	return `height: ${webAppBarHeight}rpx;${backgroundStyle}; top: 0px;`
	// #endif
	// #ifdef APP
	return `height: ${webAppBarHeight}rpx;${backgroundStyle}; top: ${safeAreaInsetsTop}px`
	// #endif
}
export const mainMineAppBarPaddingTopStyle = () => {
	// #ifdef MP-WEIXIN
	return `${menuButtonBarHeight + safeAreaInsetsTop}px;`
	// #endif
	// #ifdef MP-TOUTIAO
	return `${menuButtonBarHeight * 2 + safeAreaInsetsTop}px;`
	// #endif
	// #ifdef WEB
	return `${webAppBarHeight}rpx;`
	// #endif
	// #ifdef APP
	return `calc(${webAppBarHeight}rpx + ${safeAreaInsetsTop}px);`
	// #endif
}

// 主页Tab项
export const mainHomeTabsHeaderStyle = () => {
	// #ifdef MP-WEIXIN || APP
	return `top: ${safeAreaInsetsTop}px;`
	// #endif
	// #ifdef MP-TOUTIAO
	return `top: ${safeAreaInsetsTop}px; margin-top: ${menuButtonBarHeight}px;`
	// #endif
	// #ifdef WEB
	return `top: ${safeAreaInsetsTop}px;`
	// #endif
}
// 我的页面滚动区域
export const mainMineScrollViewStyle = () => {
	// #ifdef MP-WEIXIN
	return `height: 100%;`
	// #endif
	// #ifdef MP-TOUTIAO
	return `height: calc(${safeAreaHeight}px - ${menuButtonBarHeight}px - ${mainBottomTabsHeight}rpx)`
	// #endif
	// #ifdef WEB || APP
	return `height: 100%;`
	// #endif
}
export const mainMinePaddingTopStyle = () => {
	// #ifdef MP-WEIXIN
	return `padding-top: ${menuButtonBarHeight}px`
	// #endif
	// #ifdef MP-TOUTIAO
	return `padding-top: ${menuButtonBarHeight}px`
	// #endif
	// #ifdef WEB || APP
	return `padding-top: ${webAppBarHeight}rpx`
	// #endif
}
// 默认顶部导航样式
export const comNavBarStyle = () => {
	// #ifdef MP-WEIXIN
	return `margin-top: ${safeAreaInsetsTop}px; height: ${menuButtonBarHeight}px; width: ${menuButtonLeft}px;`
	// #endif
	// #ifdef MP-TOUTIAO
	return `margin-top: ${safeAreaInsetsTop + menuButtonBarHeight}px; padding: 10rpx 20rpx;`
	// #endif
	// #ifdef WEB
	return `margin-top: 0rpx`
	// #endif
	// #ifdef APP
	return `margin-top: ${safeAreaInsetsTop}px`
	// #endif
}